// 定义一个名为 ReaderForm 的对象，用作 Vue 组件
const ReaderForm = {
    // 组件名称
    name: 'ReaderForm',
    // 组件模板
    template: `  
    <div v-if="visible" class="modal">  
      <div class="modal-overlay" @click="close"></div>  
      <div class="modal-content">  
        <header class="modal-header">  
          <h2>{{ formData.readerId ? '编辑读者信息' : '添加读者信息' }}</h2>  
          <button class="close-button"  @click="close">×</button> <!-- 右侧 -->
        </header>  
        <form @submit.prevent="submitForm">  
          <input type="hidden" v-model="formData.id">  

          <!-- 表单输入字段 -->
          <div class="form-group">  
            <label for="readerNumber">学号/工号:</label>  
            <input type="text" id="readerNumber" v-model="formData.readerNumber" required>  
          </div>  
          <div class="form-group">  
            <label for="name">姓名:</label>  
            <input type="text" id="name" v-model="formData.name" required>  
          </div>  
          <div class="form-group">  
            <label for="gradeMajor">年级专业:</label>  
            <input type="text" id="gradeMajor" v-model="formData.gradeMajor" required>  
          </div>  
          <div class="form-group">  
            <label for="gender">性别:</label>  
            <select id="gender" v-model="formData.gender" required>  
              <option value="M">男</option>  
              <option value="F">女</option>  
            </select>  
          </div>  
          <div class="form-group">  
            <label for="type">读者类型:</label>  
            <select id="type" v-model="formData.type" required>  
              <option value="1">学生</option>  
              <option value="2">职工</option>  
            </select>  
          </div>  
          <div class="form-group">  
            <label for="borrowLimit">借书额度:</label>  
            <input type="number" id="borrowLimit" v-model="formData.borrowLimit" required>  
          </div>  
          <div class="form-group">  
            <label for="email">邮箱地址:</label>  
            <input type="text" id="email" v-model="formData.email" required>  
          </div>  
          <div class="form-group">  
            <label for="phone">联系电话:</label>  
            <input type="text" id="phone" v-model="formData.phone" required>  
          </div>  
          <div class="form-group">  
            <label for="departmentId">所属部门 ID:</label>  
            <input type="number" id="departmentId" v-model="formData.departmentId" required>  
          </div>  
          <div class="form-group">  
            <label for="status">读者状态:</label>  
            <select id="status" v-model="formData.status" required>  
              <option value="1">活跃</option>  
              <option value="0">禁用</option>  
            </select>  
          </div>  
          <div class="form-group full-width">  
            <label for="remark">备注:</label>  
            <textarea id="remark" v-model="formData.remark"></textarea>  
          </div>  
          <div class="form-group full-width">  
            <!--  文件上传组件，传入fileUrl地址-->
            <file-upload :fileUrl="formData.avatarUrl" 
             @upload-success="handleAvatarUpload"
             @delete-success="handleAvatarDelete">
             </file-upload>
          </div>  
          <div class="form-group submit">  
            <input type="submit" :value="formData.readerId ? '更新读者信息' : '添加读者信息'">  
          </div>  
        </form>  
      </div>  
    </div>  
  `,
    // 局部注册组件
    components: {
        FileUpload,
        ImageUpload
    },

    // 组件属性
    props: {
        // 控制表单弹窗的显示与隐藏
        visible: {
            type: Boolean,
            default: false
        },
        // 从父组件传入的读者数据
        readerData: {
            type: Object,
            default: () => ({})
        }
    },
    // 自定义事件
    emits: ['update:visible', 'submit'],
    // 组件设置函数
    setup(props, { emit }) {
        // 表单数据的初始值
        const initialValue = {
            readerNumber: '',
            name: '',
            gradeMajor: '',
            gender: 'M',
            type: 1,
            borrowLimit: 0,
            email: '',
            phone: '',
            departmentId: 0,
            status: 1,
            remark: '',
            avatarUrl: ''
        }


        // 使用 Vue.ref 创建响应式表单数据对象
        const formData = Vue.ref({})

        // 提交表单
        const submitForm = () => {
            emit('submit', {...formData.value});
            // close();
        };

        // 头像上传成功回调
        const handleAvatarUpload = (uploadFile) => {
            console.log("头像上传完成");
            // 将上传成功的文件 URL 赋值给 formData.avatarUrl
            formData.value.avatarUrl = uploadFile.fileUrl;
        };

        // 头像删除成功回调
        const handleAvatarDelete = () => {
            // 将文件 URL 赋值给 formData.avatarUrl
            formData.value.avatarUrl = '';
        };

        // 关闭弹框
        const close = () => {
            emit('update:visible', false);
        };

        // 监听 readerData 的变化，同步更新表单数据
        Vue.watch(() => props.readerData, (newReaderData) => {
            formData.value = newReaderData? {...newReaderData} : {...initialValue};
        }, { immediate: true });


        // 返回表单数据及方法
        return {
            formData,
            submitForm,
            close,
            handleAvatarUpload,
            handleAvatarDelete
        };
    }
};